<template>
  <div class="container">
    <div class="top-section" ref="topSection">
      <dv-border-box-12 :style="borderStyle">
        <LeftTop />
      </dv-border-box-12>
    </div>

    <div class="bottom-section" ref="bottomSection">
      <dv-border-box-13 :style="borderStyle">
        <LeftBottom />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script setup>
import LeftTop from "@/components/left/top.vue";
import LeftBottom from "@/components/left/bottom.vue";
import { ref, onMounted, onBeforeUnmount, computed } from "vue";

const topSection = ref(null);
const containerSize = ref({ width: 0, height: 0 });

// 计算边框样式
const borderStyle = computed(() => {
  return {
    width: `${containerSize.value.width}px`,
    height: `${containerSize.value.height}px`,
  };
});

// 更新容器尺寸
const updateContainerSize = () => {
  if (topSection.value) {
    const style = getComputedStyle(topSection.value);
    const paddingX =
      parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
    const paddingY =
      parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);

    containerSize.value = {
      width: topSection.value.clientWidth - paddingX,
      height: topSection.value.clientHeight - paddingY,
    };
  }
};

let resizeObserver = null;

onMounted(() => {
  // 初始渲染后立即更新尺寸
  setTimeout(() => {
    updateContainerSize();

    // 初始化ResizeObserver监听尺寸变化
    if (typeof ResizeObserver !== "undefined") {
      resizeObserver = new ResizeObserver(() => {
        updateContainerSize();
      });

      if (topSection.value) {
        resizeObserver.observe(topSection.value);
      }
    }
  }, 100);

  // 添加窗口resize事件监听
  window.addEventListener("resize", updateContainerSize);
});

onBeforeUnmount(() => {
  // 清理ResizeObserver
  if (resizeObserver) {
    resizeObserver.disconnect();
  }

  // 移除事件监听
  window.removeEventListener("resize", updateContainerSize);
});
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 10px;
  box-sizing: border-box;
}

.top-section {
  /* 设置固定高度，根据图片比例大约占60% */
  height: 50%;
  padding: 10px;
  position: relative;
}

.bottom-section {
  /* 设置固定高度，根据图片比例大约占40% */
  height: 50%;
  padding: 10px;
  position: relative;
}

/* 确保DataV边框组件正确渲染 */
:deep(.dv-border-box-13),
:deep(.dv-border-box-12) {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
</style>